<!---->
<template>
  <div class="manager">
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="博客ID" prop="ID" align="center"> </el-table-column>
      <el-table-column label="博客标题" prop="title" align="center"> </el-table-column>
      <el-table-column label="作者" prop="author" align="center"> </el-table-column>
      <el-table-column label="date" prop="date" align="center"> </el-table-column>
      <el-table-column label="操作" align="center"> 
          <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <page></page>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';
import page from "@/components/page.vue";
export default {
  //import引入的组件需要注入对象中才能用
  components: {
    page: page,
  },
  data() {
    return {
      tableData: [
        {
          ID: "000001",
          title: "ffdd",
          author: "王小虎",
          date: "2016-05-02",
        },
        {
          ID: "000001",
          title: "ffdd",
          author: "王小虎",
          date: "2016-05-02",
        },
        {
          ID: "000001",
          title: "ffdd",
          author: "王小虎",
          date: "2016-05-02",
        },
        {
          ID: "000001",
          title: "ffdd",
          author: "王小虎",
          date: "2016-05-02",
        },
      ],
      search: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push('/issue')
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.manager {
  margin: 20px auto;
}
</style>